<template>
	<div class="header">
        <header>
        	<section class="head--logo">
        		<img class="content-img" src="./images/positionicon.png"/>
        		 <router-link to="/sign/city" class="head_gotocity">
                    <span class="head_city" >{{currentCity}}</span>
        	     </router-link>
        	</section>
        	<section class="head--myorder">
        		<img class="myorder-img" src="./images/person_order_icon.png"/>
        		 <router-link to="/foo" class="head_gotocity">
                    <span class="head_order" >我的订单</span>
        	     </router-link>
        	</section>
        </header><!-- /header -->
     </div>
</template><!-- //header这个被渲染的组件，内部包含一个自己的内嵌的router-view，那个这个通过路由的操控是通过vuerouter中的children来配置的 -->
<script>
import $ from 'webpack-zepto';
export default {
	data(){
		return {
              shareTip:false,
              isapp:false,
		}
	},
	created(){//这个钩子函数是在实例被创建之后data数据被渲染，但是template还没渲染之前,页面内容还未出现
		
	},
    props:['currentCity'],
	components: {
          //组建声明
    },
	methods:{
		
	}
};
</script>
<style lang="scss" scoped>
@import 'src/common/styles/mixins';
  .router-link-active {
	  color: red;
	   text-decoration: none;
  }
  .head_gotocity{
  	text-decoration: none;
  }
  header{
		@extend %flexbox;
		@include justifyContent(center,center);
		@include alignItem(center,center);
		.head--logo{
			display: table;
			.content-img{
				width: px2rem(20);
				height: px2rem(24);
				vertical-align: middle;
			}
			.head_city{
				margin-left: px2rem(5);
				vertical-align: middle;
				font-size: px2rem(24);
				color:#ff651a;
			}
		}
		.head--myorder{
			position: absolute;
			right: px2rem(20);
			display: table;
			.myorder-img{
				width: px2rem(30);
				height: px2rem(27);
				vertical-align: middle;
			}
			.head_order{
				margin-left: px2rem(5);
				vertical-align: middle;
				font-size: px2rem(24);
				color:#ff651a;
			}
		}
  }
</style>